<template>
	<div class="container">
		<el-page-header @back="goBack" content="打印机价格设置"></el-page-header>

		<el-row type="flex" justify="space-between" class="nav-bar">
			<el-col :span="3">
				<el-button type="primary" icon="el-icon-plus" plain @click="create">新建价格</el-button>
			</el-col>
			<el-col class="text-right">
				<el-form :inline="true" label-width="auto" class="nav-bar-form">
					<el-form-item>
						<el-input placeholder="关键词搜索" v-model="key" clearable prefix-icon="el-icon-search"
							@clear="getList"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="getList">查询</el-button>
					</el-form-item>
				</el-form>
			</el-col>
		</el-row>

		<el-table :data="tableData" style="width: 100%" stripe>
			<el-table-column prop="area" label="地区">
			</el-table-column>
            <el-table-column prop="type" label="价格" width="200">
                <template slot-scope="scope">
                    <div v-for="(item,index) in scope.row.type">--</div>
                </template>
			</el-table-column>
			<el-table-column prop="sort" label="排序" width="100">
			</el-table-column>
			<el-table-column prop="state" label="状态" width="200">
				<template slot-scope="scope">
					<span class="color-success" v-if="scope.row.state == '已启用'">{{ scope.row.state }}</span>
					<span class="color-danger" v-if="scope.row.state == '已隐藏'">{{ scope.row.state }}</span>
				</template>
			</el-table-column>
			<el-table-column label="操作" fixed="right" width="180">
				<template slot-scope="scope">
					<el-button @click="edit(scope.row)" type="text" size="small">编辑</el-button>
					<el-button @click="del(scope.row.id)" type="text" size="small">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="table-pagination">
			<el-pagination background layout="sizes, total, prev, pager, next" :total="total"
				:page-sizes="[10, 50, 100, 200]" :page-size="pageSize" :current-page="page" @current-change="pageChange"
				@size-change="handleSizeChange">
			</el-pagination>
		</div>
		<el-dialog :title="dialogType == 'add' ? '新建分类' : '编辑分类'" :visible.sync="dialogVisible" width="500px">
			<el-form ref="form" :model="form" label-width="100px">
				<el-form-item label="地区">
					<el-input v-model="form.area"></el-input>
				</el-form-item>
				<el-form-item label="排序">
					<el-input v-model="form.sort"></el-input>
				</el-form-item>
				<el-form-item label="状态">
					<el-radio-group v-model="form.state">
						<el-radio label="已启用"></el-radio>
						<el-radio label="已隐藏"></el-radio>
					</el-radio-group>
				</el-form-item>
                <el-form-item label="参考图片">
                    <cropper-upload :zoomScale='[1,1]' :isCropper="true" @getUpload="handleFilesSuccess" class="avatar-uploader">
                        <img v-if="form.photo" :src="fileURL + form.photo" class="avatar">
                        <div class="avatar-uploader-icon" v-else>
                            <div><i class="el-icon-plus"></i></div>
                            <div class="e-font-14">上传图片</div>
                        </div>
                    </cropper-upload>
                    <div class="tips e-p-t-10">建议上传尺寸比例为200*200 </div>
                </el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取消</el-button>
				<el-button type="primary" @click="submitType">确定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
export default {
	layout: 'admin',
	head() {
		return {
			title: '废品下级分类' 
		}
	},
	data() {
		return {
			key: '',
			page: 1,
			pageSize: 10,
			loading: false,
			total: 0,
			dialogVisible: false,
			dialogType: 'add',
			form: {
				name: '',
				sort: 0,
				state: '已启用',
                photo: ''
			},
			tableData: []
		}
	},
	watch: {
		dialogVisible(value) {
			if (!value) {
				this.form = {
					name: '',
					sort: 0,
					state: '已启用'
				}
			}
		}
	},
	mounted() {
		this.getList()
	},
	methods: {
		goBack() {
			this.$router.go(-1)
		},
        handleFilesSuccess(res, file) {
            if (file.status === "success") {
                this.loading = false
                this.form.photo = res.path
            }
        },
		getList() {
			this.tableData = []
			this.loading = true
			setTimeout(()=>{
				this.loading = false
				this.tableData = [
                    {
						id:1,
						area: '广东-清远-清城区',
						type:[],
						state: '已启用',
                        sort: 0,
                        img: '/temp/1.jpeg'
					}
				]
			},1000)
			// this.$axios.post('/NewsType/List', {
			// 	"PageIndex": this.page,
			// 	"PageSize": this.pageSize,
			// 	"Key": this.key
			// }).then((res) => {
			// 	this.tableData = res.rows;
			// 	this.total = res.total;
			// 	this.jurisdiction = res;
			// })
		},
		submitType() {
			let api = ''
			if (this.dialogType == 'add') {
				api = '/NewsType/create'
			}
			if (this.dialogType == 'edit') {
				api = '/NewsType/edit'
			}

			this.$axios.post(api, this.form).then((res) => {
				this.$message.success(res.msg);
				this.dialogVisible = false;
				this.getList()
			})
		},
		create() {
			this.dialogType = 'add'
			this.dialogVisible = true
		},
		edit(row) {
			console.log(row)
			this.dialogType = 'edit'
			this.dialogVisible = true
			this.form.id = row.id
			this.form.name = row.name
			this.form.sort = row.sort
			this.form.state = row.state
            this.form.photo = row.img
		},
		search() {
			this.getList()
		},
		pageChange(e) { // 页码切换事件
			this.page = e;
			this.getList()
		},
		handleSizeChange(val) {
			this.page = 1;
			this.pageSize = val;
			this.getList()
		},
		del(id) {
			this.$confirm('此操作将删除该分类, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.$axios.post('/NewsType/delete?Ids=' + id).then((res) => {
					this.$message.success(res.msg);
					this.getList()
				})
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消删除'
				});
			});
		}
	}
}
</script>

<style lang="scss">
.nav-bar {
	padding: 45px 0 0;
}

.send {
	margin-top: 15px;
	margin-right: 10px;
}

.dialogForm {
	display: flex;
	flex-wrap: wrap;

	.el-form-item {
		width: 50%;
		float: left;

		&.all {
			width: 100%;
		}

		.el-select {
			width: 100%;
		}
	}
}
</style>
